<template>
  <nut-category :category="category" @change="change">
    <nut-categorypane :category-child="categoryChild" @onChange="onChange"> </nut-categorypane>
  </nut-category>
</template>
<script setup lang="ts">
import { reactive, toRefs, onMounted, ref } from 'vue';

const categoryInfo = ref({});
const category = ref([]);
const categoryChild = ref([]);

const getData = () => {
  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
    .then((response) => response.json())
    .then((res) => {
      const { categoryInfo, categoryChild } = res;
      categoryInfo.value = categoryInfo;
      category.value = categoryInfo.category;
      categoryChild.value = categoryChild;
    })
    .catch((err) => console.log('Oh, error', err));
};
onMounted(() => {
  setTimeout(() => {
    getData();
  }, 500);
});

const change = (index: any) => {
  categoryChild.value = [].concat(categoryInfo.value.category[index + 1].children as any);
};
const onChange = () => {
  console.log('当前分类数据');
};
</script>
